<template>
  <div
    class="index-table"
    v-for="item in templateData?.performanceAssessmentTemplateDimensionality"
    :key="item.type"
  >
    <div class="index-card" v-if="item.type === 1">
      <ConditionBox>
        <template #left>
          <div class="title">{{ item.name }}</div>
          维度权重：<a-tag color="arcoblue">{{ item.weight }}%</a-tag>
        </template>
        <template #right>
          <a-space v-if="!props.review">
            <a-button type="text" @click="selectTemplate">引用指标库</a-button>
          </a-space>
        </template>
      </ConditionBox>
      <a-divider />

      <IndexTable
        v-model:data="templateData.performanceKeyPerformanceIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 2">
      <ConditionBox>
        <template #left>
          <div class="title">{{ item.name }}</div>
          维度权重：<a-tag color="arcoblue">{{ item.weight }}%</a-tag>
        </template>
        <template #right>
          <a-space v-if="!props.review">
            <a-button type="text" @click="selectAbilityTemplate"
              >引用指标库</a-button
            >
          </a-space>
        </template>
      </ConditionBox>
      <a-divider />
      <AbilityIndeTable
        v-model:data="templateData.performanceAbilityQualityIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 3">
      <ConditionBox>
        <template #left>
          <div class="title">{{ item.name }}</div>
          维度权重：<a-tag color="arcoblue">{{ item.weight }}%</a-tag>
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <WorkPlanTable
        v-model:data="templateData.performanceWorkPlanIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 4">
      <ConditionBox>
        <template #left>
          <div class="title">{{ item.name }}</div>
          维度权重：<a-tag color="arcoblue">{{ item.weight }}%</a-tag>
        </template>
        <template #right></template>
      </ConditionBox>
      <a-divider />
      <TargetTable
        v-model:data="templateData.performanceTargetIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 5">
      <ConditionBox>
        <template #left>
          <div class="title">{{ item.name }}</div>
          <!-- 维度权重：<a-tag color="arcoblue">{{ item.weight }}%</a-tag> -->
        </template>
        <template #right>
          <a-space v-if="!props.review">
            <a-button type="text" @click="selectAddSubtractTemplate"
              >引用指标库</a-button
            >
          </a-space>
        </template>
      </ConditionBox>
      <a-divider />
      <AddSubtractTable
        v-model:data="templateData.performanceAddSubtractIndexLibraryUse"
        :review="props.review"
      />
    </div>
    <div class="index-card" v-if="item.type === 6">
      <ConditionBox>
        <template #left>
          <div class="title">{{ item.name }}</div>
          <!-- 维度权重：<a-tag color="arcoblue">{{ item.weight }}%</a-tag> -->
        </template>
        <template #right>
          <a-space v-if="!props.review">
            <a-button type="text" @click="selectVoteTemplate"
              >引用指标库</a-button
            >
          </a-space>
        </template>
      </ConditionBox>
      <a-divider />
      <VetoTable
        v-model:data="templateData.performanceVetoIndexLibraryUse"
        :review="props.review"
      />
    </div>
  </div>
  <IndexTemplateModal v-model:visible="templateVisible" @addIndex="addIndex" />
  <AblityIndexTemplateModal
    v-model:visible="abilityTemplateVisible"
    @addIndex="addAbilityIndex"
  />
  <AddSubtractTemplateModal
    v-model:visible="addSubtractTemplateVisible"
    @addIndex="addAddSubtractIndex"
  />
  <AddVoteTemplateModal
    v-model:visible="voteTemplateVisible"
    @addIndex="addVoteIndex"
  />
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import IndexTable from './AssessmentTable/index.vue';
import AbilityIndeTable from './AbilityIndeTable/index.vue';
import WorkPlanTable from './WorkPlanTable/index.vue';
import TargetTable from './TargetTable/index.vue';
import AddSubtractTable from './AddSubtractTable/index.vue';
import VetoTable from './VetoTable/index.vue';
import { useVModel } from '@vueuse/core';
import IndexTemplateModal from './AssessmentTable/IndexTemplateModal.vue';
import AblityIndexTemplateModal from './AbilityIndeTable/AblityIndexTemplateModal.vue';
import AddSubtractTemplateModal from './AddSubtractTable/AddSubtractTemplateModal.vue';
import AddVoteTemplateModal from './VetoTable/AddVoteTemplateModal.vue';

const props = withDefaults(
  defineProps<{
    data: PerformanceAppraisal;
    review?: boolean;
  }>(),
  {}
);
const emit = defineEmits(['handleOk', 'update:data']);
const templateData = useVModel(props, 'data', emit);
const handleOk = () => {
  emit('handleOk');
};
const change = () => {
  emit('update:data', templateData.value);
};
const templateVisible = ref(false);
const selectTemplate = async () => {
  templateVisible.value = true;
};
const addIndex = async (data: any) => {
  if (!data.length) return;
  templateData.value.performanceKeyPerformanceIndexLibraryUse = [
    ...(templateData.value.performanceKeyPerformanceIndexLibraryUse || []),
    ...data
  ];
};
const abilityTemplateVisible = ref(false);
const selectAbilityTemplate = async () => {
  abilityTemplateVisible.value = true;
};
const addAbilityIndex = async (data: any) => {
  if (!data.length) return;
  templateData.value.performanceAbilityQualityIndexLibraryUse = [
    ...(templateData.value.performanceAbilityQualityIndexLibraryUse || []),
    ...data
  ];
};
const addSubtractTemplateVisible = ref(false);
const selectAddSubtractTemplate = async () => {
  addSubtractTemplateVisible.value = true;
};
const addAddSubtractIndex = async (data: any) => {
  if (!data.length) return;
  templateData.value.performanceAddSubtractIndexLibraryUse = [
    ...(templateData.value.performanceAddSubtractIndexLibraryUse || []),
    ...data
  ];
};
const voteTemplateVisible = ref(false);
const selectVoteTemplate = async () => {
  voteTemplateVisible.value = true;
};
const addVoteIndex = async (data: any) => {
  if (!data.length) return;
  templateData.value.performanceVetoIndexLibraryUse = [
    ...(templateData.value.performanceVetoIndexLibraryUse || []),
    ...data
  ];
};
</script>

<style lang="less" scoped>
.index-table {
  width: 1000px;
  margin: 0 auto;
}
.index-card {
  margin: 20px 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  padding: 20px;
  border-radius: 4px;
  .title {
    font-weight: 600;
    font-size: 18px;
  }
}
</style>
